$(function() {

let layer=layui.layer;
let form=layui.form;
  // ********************************************************加载列表
   function Fn(){
    $.ajax({
        url:"/admin/links",
        success:function(res){
            //console.log(res.data);
            let data = res.data
            $("tbody").html("")
            $.each(data,function(index,item){
              //console.log(item);
              
              let tr = $(` <tr>
              <td>${item.id}</td>
              <td>
                <div class="bg">
                  <img src="http://localhost:8888/uploads/${item.linkicon}">
                </div>
              </td>
              <td>${item.linkname}</td>
              <td>${item.linkurl}</td>
              <td>${item.linkdesc}</td>
              <td>
                <button type="button" class="layui-btn layui-btn-xs edit" _id=${item.id}>
              编辑
            </button>
                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete"  _id=${item.id}>
              删除
            </button>
              </td>
            </tr>`)
            $("tbody").append(tr)
            })
        }
    })
   }
   Fn()


  // *********************************************************删除友情链接
   

  $("tbody").on("click",".delete",function(){
     let id = $(this).attr("_id")
     layer.confirm("确定删除吗？",function(index){
        $.ajax({
            url:`/admin/links/${id}`,
            type:"delete",
            success:function(res){
                if(res.stutas=0){
                layer.msg(res.message)
                }
                layer.close(index)
              Fn()
            }
        })
     })
     //console.log(id);
    
  })
 

  // **********************************************************编辑友情链接
 
  let edit_str = `<form id="edit-form" lay-filter='editForm' class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;
    $("tbody").on("click",".edit",function(){
      let bd= layer.open({
           type:1,
           content:edit_str
       })
       let id = $(".edit").attr("_id")
       $.ajax({
           url:`/admin/links/${id}`,
           success:function(res){
             form.val("editForm",res.data)
           }
       })
       $("#urlIcon").click(function(){
        $("#linkFile").click()
    })
     let obj 
    $("#linkFile").on("change", function () {
        obj = this.files[0];
       let src = URL.createObjectURL(obj);
        $('#preIcon').attr('src',src);
    });

    //form.val(".edit-form",)
    $("#edit-form").on("submit",function(e){
        //默认
        e.preventDefault();
        let data = new FormData(this);
        data.set("linkicon",obj)
        // let data=form.val()
        //console.log(data);
        $.ajax({
            url:`/admin/links/${id}`,
            type:"PUT",
            data:data,
            processData: false,
            contentType: false,
            success:function(res){
             layer.msg(res.message)
             layer.close(bd)
             Fn()
            }
        })
    })
    })

  // *********************************************************添加友情链接
 
  let add_str = `
  <form id="add-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接名称</label>
        <div class="layui-input-block">
          <input type="text" name="linkname" required lay-verify="required" placeholder="请输入链接名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
          <input type="text" name="linkurl" required lay-verify="required" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：链接描述 -->
      <div class="layui-form-item">
        <label class="layui-form-label">链接描述</label>
        <div class="layui-input-block">
          <input type="text" name="linkdesc" required lay-verify="required" placeholder="请输入链接描述" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第四行：上传图片 -->
      <div class="layui-form-item">
        <div class="layui-input-block icon-url">
          <button type="button" class="layui-btn layui-btn-sm" id="urlIcon">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <input type="file" name="linkicon" id="linkFile" style="display: none;">
          <img id="preIcon" src="">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`
    $("#add-link").on("click",function(){
        let close= layer.open({
            type:1,
            content:add_str
        })
        $("#urlIcon").click(function(){
            $("#linkFile").click()
        })

        $("#add-form").on("submit",function(e){
            //默认
            e.preventDefault();
            let data = new FormData(this);
            // let data=form.val()
           
            //console.log(data);
            $.ajax({
                url:"/admin/links",
                type:"post",
                data:data,
                processData: false,
                contentType: false,
                success:function(res){
                  //console.log(res);
                  layer.msg(res.message)
                  layer.close(close)
                  Fn()
                }
            })
        })
    })
})